<template>
  <div>
    <MBX level1="订单管理" level2="订单列表"></MBX>
    <el-card>
      <el-row>
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <el-input placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input></div
        ></el-col>
        <el-col :span="16"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="list" border style="width: 100%">
        <el-table-column label="#" width="50" type="index"> </el-table-column>
        <el-table-column prop="order_number" label="订单编号">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格"> </el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <div>
              <el-tag :type="typeObj[scope.row.order_pay]">
                {{ scope.row.order_pay | pay }}</el-tag
              >
            </div>
          </template></el-table-column
        >
        <el-table-column prop="is_send" label="是否发货"> </el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">
            <div>{{ scope.row.create_time | timeC }}</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <!-- <template> -->
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              class="el-icon-edit"
              @click="edit(scope.row)"
            ></el-button>
            <el-button
              type="success"
              size="small"
              class="el-icon-location"
              @click="wuliu(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pages.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- edit -->
    <el-dialog title="收货地址" :visible.sync="sssdialogFormVisible">
      <el-form>
        <el-form-item label="省市区/县" :label-width="formLabelWidth">
          <el-cascader
            v-model="value"
            :options="City"
            :props="defultaaa"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="sssdialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="sssdialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <!-- 物流 -->
    <el-dialog title="物流信息" :visible.sync="dialogVisible" width="50%">
      <!-- <span>这是一段信息</span> -->
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(activity, index) in WuLiu"
          :key="index"
          :timestamp="activity.time"
          :icon="activity.icon"
          :color="activity.color"
          :size="activity.size"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import City from '@/sishujv/city'
import WuLiu from '@/sishujv/WuLiu'
import { getdinglistApi } from '@/http/api'
export default {
  name: 'ordersA',
  data() {
    return {
      formLabelWidth: '100px',
      sssdialogFormVisible: false,
      dialogVisible: false,
      defultaaa: {
        expandTrigger: 'hover',
        value: 'value',
        children: 'children',
        label: 'label'
      },
      value: '',
      City: City,
      WuLiu: WuLiu.data,
      typeObj: {
        0: 'danger',
        1: 'success'
      },
      list: [],
      pages: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 0
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    wuliu() {
      this.dialogVisible = true
    },
    handleChange() {},
    edit(row) {
      this.sssdialogFormVisible = true
    },
    async getlist() {
      const res = await getdinglistApi(this.pages)
      console.log(res)
      const { total, goods } = res
      this.total = total
      this.list = goods
    },
    handleCurrentChange(val) {
      this.pages.pagenum = val
      this.getlist()
    },
    handleSizeChange(val) {
      this.pages.pagesize = val
      this.getlist()
    }
  }
}
</script>
<style>
.el-scrollbar__wrap {
  height: 200px;
}
</style>
<style lang="scss" scoped>
.el-cascader {
  width: 100%;
}
.el-timeline-item {
  text-align: left;
}
</style>
